<template>
  <!-- 侧面板 -->
  <el-scrollbar>
    <!-- collapse-transition是否开启折叠动画 -->
    <el-menu
      :default-openeds="opens"
      :collapse-transition="false"
      :collapse="isCollapse"
      router
      @select="handleSelect"
    >
      <div class="aside_title_all">
        <span v-show="logoTextShow" >校园疫情管理系统</span>
      </div>
      <div v-for="item in menus" :key="item.id">
        <!-- 一级菜单 -->
        <div v-if="item.href">
          <el-menu-item :index="item.href">
            <el-icon>
              <span
                class="iconfont"
                :class="item.icon"
                style="font-size: 18px,text-align:center"
                v-if="searchicon(item.icon)"
              ></span>
              <component
                :is="item.icon"
                style="width: 18px; vertical-align: middle"
                v-else
              ></component>
            </el-icon>
            <span class="ml-5" v-show="logoTextShow">{{ item.title }}</span>
          </el-menu-item>
        </div>
        <!-- 二级菜单 -->
        <div v-else>
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <el-icon>
                <span
                  class="iconfont"
                  :class="item.icon"
                  style="font-size: 18px,text-align:center"
                  v-if="searchicon(item.icon)"
                ></span>
                <component
                  :is="item.icon"
                  style="width: 18px; vertical-align: middle"
                  v-else
                ></component>
              </el-icon>
              <span class="ml-5" v-show="logoTextShow">{{ item.title }}</span>
            </template>
            <div v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.href">
                <span
                  class="iconfont"
                  :class="subItem.icon"
                  style="font-size: 18px,text-align:center"
                  v-if="searchicon(subItem.icon)"
                ></span>
                <component
                  :is="subItem.icon"
                  style="width: 18px; vertical-align: middle"
                  v-else
                ></component>
                <span class="ml-5">{{ subItem.title }}</span>
              </el-menu-item>
            </div>
          </el-sub-menu>
        </div>
      </div>

      <!-- <el-menu-item index="/">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><message /></el-icon>
          <span>疫情数据可视化</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/user">疫情数据大屏</el-menu-item>
          <el-menu-item index="/china">中国疫情图</el-menu-item>
          <el-menu-item index="/global">世界疫情图</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><message /></el-icon>
          <span>校园防疫管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/heath">健康打卡</el-menu-item>
          <el-menu-item index="2-2">核酸检测</el-menu-item>
          <el-menu-item index="2-3">疫苗接种</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><setting /></el-icon>
          <span>校园系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1">学院管理</el-menu-item>
          <el-menu-item index="3-2">班级管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><setting /></el-icon>
          <span>疫情数据管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1">疫情新闻</el-menu-item>
          <el-menu-item index="/chinadata">中国疫情数据</el-menu-item>
          <el-menu-item index="/globaldata">世界疫情数据</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="5">
        <template #title>
          <el-icon><setting /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1">用户管理</el-menu-item>
          <el-menu-item index="/role">角色管理</el-menu-item>
          <el-menu-item index="/menu">菜单管理</el-menu-item>
          <el-menu-item index="/file">文件管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu> -->
    </el-menu>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'common-aside',
  data() {
    return {
      menus: localStorage.getItem('menus')
        ? JSON.parse(localStorage.getItem('menus'))
        : [],
      opens: localStorage.getItem('menus')
        ? JSON.parse(localStorage.getItem('menus')).map((v) => v.id + '')
        : []
    }
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: true
    },
    logoTextShow: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 0
    }
    // menus: {
    //   type: Array,
    //   default: function () {
    //     return []
    //   }
    // }
  },
  methods: {
    handleSelect() {
      // console.log(index);
      // alert(this.$route.name)
    },
    searchicon(values) {
      // console.log(values)
      if (values) {
        return values.startsWith('icon-')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.aside_title_all {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: rgb(64, 115, 177);
}
.el-menu {
  border-right: 0;
}

// /deep/ .el-menu-item-group__title {
//   padding: 0;
// }

// @deep: ~'>>>';
// .el-sub-menu {
//   @{deep} .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }
// ::v-deep .el-sub-menu {
//   .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }

// /deep/ .el-sub-menu {
//   .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }
// :deep(.el-sub-menu) {
//   .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }
</style>